<template>
	<view>
		<!-- 自定义导航 -->
		<uni-nav-bar :border="false" :fixed="true" status-bar @clickRight="openAddInput">
			<view class="flex align-center justify-center w-100">
				<!-- <view class="font-lg text-main mx-1">关注</view> -->
				<view class="mx-1" v-for="(item, index) in tabBars" :key="index"
					:class="tabIndex === index ? 'font-lg text-main' : 'font-md text-light-muted'"
					@click="changeTab(index)">{{item.name}}</view>
			</view>
			<view slot="right" class="iconfont icon-fatie_icon"></view>
		</uni-nav-bar>
		<!-- 关注的滑动内容区域 -->
		<swiper :current="tabIndex" :duration="150" :style="'height:'+scrollH +'px;'" @change="changeTabIndex">
			<!-- 关注 -->
			<swiper-item>
				<scroll-view @scrolltolower="loadmoreEvent" scroll-y="true" :style="'height:'+scrollH +'px;'">
					<block v-for="(item,index) in list" :key="index">
						<common-list :item="item" :index="index" @doSupport="doSupport"></common-list>
						<divider></divider>
					</block>
					<load-more :loadmore="loadmore"></load-more>
				</scroll-view>
			</swiper-item>
			<!-- 话题 -->
			<swiper-item>
				<scroll-view scroll-y="true" :style="'height:'+scrollH +'px;'">
					<!-- 热门分类 -->
					<hot-cate :hotCate="hotCateList"></hot-cate>
					<!-- 搜索框 -->
					<view class="p-2">
						<view class="bg-light rounded flex align-center justify-center py-2" @click="openSearch">
							<text class="iconfont icon-sousuo mr-2"></text>
							搜索话题
						</view>
					</view>
					<!-- 轮播图 -->
					<swiper class="px-2 pb-2" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
						<swiper-item>
							<image src="/static/demo/banner1.jpg" style="height: 300rpx;" class="w-100 rounded" mode=""></image>
						</swiper-item>
						<!-- <swiper-item>
							<image src="/static/demo/banner2.jpg" style="height: 300rpx;" class="w-100 rounded" mode=""></image>
						</swiper-item> -->
					</swiper>
					<divider></divider>
					<!-- 最近更新 -->
					<view class="p-2 font-md">最近更新</view>
					<!-- 话题组件 -->
					<block v-for="(item, index) in topicList" :key="index">
						<topic-list :item="item" :key="index"></topic-list>
					</block>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	const demo = [{
			username: '昵称',
			userpic: '/static/default.jpg',
			newstime: "2024-03-19 下午 05:00",
			isFollow: true, //是否关注
			title: '我是标题',
			titlepic: '/static/demo/datapic/11.jpg',
			support: {
				type: 'support',
				support_count: 1,
				unsupport_count: 2,
			},
			comment_count: 2,
			share_num: 2

		},
		{
			username: '昵称1',
			userpic: '/static/default.jpg',
			newstime: "2024-03-19 下午 05:00",
			isFollow: true, //是否关注
			title: '我是标题',
			titlepic: '',
			support: {
				type: 'unsupport',
				support_count: 1,
				unsupport_count: 2,
			},
			comment_count: 2,
			share_num: 2

		},
		{
			username: '昵称2',
			userpic: '/static/default.jpg',
			newstime: "2024-03-19 下午 05:00",
			isFollow: true, //是否关注
			title: '我是标题',
			titlepic: '',
			support: {
				type: '',
				support_count: 1,
				unsupport_count: 2,
			},
			comment_count: 2,
			share_num: 2

		}
	]

	import uniNavBar from '@/components/uni-ui/uni-nav-bar/uni-nav-bar.vue';
	import commonList from '@/components/common/common-list.vue';
	import loadMore from '@/components/common/load-more.vue';
	import hotCate from '@/components/news/hot-cate.vue';
	import topicList from '@/components/news/topic-list.vue';
	export default {
		components: {
			uniNavBar,
			commonList,
			loadMore,
			hotCate,
			topicList
		},
		data() {
			return {
				//默认页面的高度
				scrollH: 500,
				// 选项卡的值
				tabBars: [{
						name: '关注'
					},
					{
						name: '话题'
					}
				],
				tabIndex: 0, //当前选项卡
				list: [], //关注列表
				// 1、上拉加载更多 2.加载中... 3.没有了
				loadmore: "上拉加载更多",
				hotCateList: [{
						name: '关注'
					},
					{
						name: '推荐'
					},
					{
						name: '体育'
					},
					{
						name: '热点'
					},
					{
						name: '财经'
					},
					{
						name: '娱乐'
					},
				],
				//话题列表
				topicList: [
					{
						cover: '/static/demo/topicpic/1.jpeg', //图片
						title: '话题名称哈哈哈',
						desc: '话题描述',
						today_count: 10,//今日
						news_count: 10, //动态
					},
					{
						cover: '/static/demo/topicpic/1.jpeg', //图片
						title: '话题名称哈哈哈',
						desc: '话题描述',
						today_count: 10,//今日
						news_count: 10, //动态
					},
					{
						cover: '/static/demo/topicpic/1.jpeg', //图片
						title: '话题名称哈哈哈',
						desc: '话题描述',
						today_count: 10,//今日
						news_count: 10, //动态
					},
					{
						cover: '/static/demo/topicpic/1.jpeg', //图片
						title: '话题名称哈哈哈',
						desc: '话题描述',
						today_count: 10,//今日
						news_count: 10, //动态
					},
					{
						cover: '/static/demo/topicpic/1.jpeg', //图片
						title: '话题名称哈哈哈',
						desc: '话题描述',
						today_count: 10,//今日
						news_count: 10, //动态
					},
					{
						cover: '/static/demo/topicpic/1.jpeg', //图片
						title: '话题名称哈哈哈',
						desc: '话题描述',
						today_count: 10,//今日
						news_count: 10, //动态
					},
					{
						cover: '/static/demo/topicpic/1.jpeg', //图片
						title: '话题名称哈哈哈',
						desc: '话题描述',
						today_count: 10,//今日
						news_count: 10, //动态
					}
				]
			}
			
		},
		onLoad() {
			// 页面加载时获取内容页的高度
			uni.getSystemInfo({ //异步获取系统信息
				success: res => {
					this.scrollH = res.windowHeight - res.statusBarHeight - 44
				}
			})
			//页面加载时给list赋值
			this.list = demo
		},
		methods: {
			// 打开搜索页面
			openSearch() {
				uni.navigateTo({
					url: '../../pages/search/search?type=topic',
				});
			},
			//上拉触底事件
			loadmoreEvent() {
				//验证当前是否处于可加载状态
				if (this.loadmore !== '上拉加载更多') return
				//设置加载状态
				this.loadmore = '加载中...'
				//模拟请求数据
				setTimeout(() => {
					console.log(222)
					//加载数据
					this.list = [...this.list, ...this.list]
					//设置加载状态
					this.loadmore = '上拉加载更多'

				}, 2000)

			},
			//顶踩操作
			doSupport(obj) {
				let index = obj.index
				let type = obj.type
				let msg = type === 'support' ? '顶' : '踩'
				let item = this.list[index]
				if (item.support.type === '') {
					item.support[type + '_count']++
				} else if (item.support.type === 'support' && type === 'unsupport') {
					// 顶 -1
					item.support.support_count--;
					// 踩 +1
					item.support.unsupport_count++;
				} else if (item.support.type === 'unsupport' && type === 'support') {
					// 顶+1
					item.support.support_count++;
					//踩-1
					item.support.unsupport_count--;
				}
				item.support.type = type
				uni.showToast({
					title: msg + '成功'
				})
			},
			//切换滑动内容
			changeTabIndex(e) {
				this.tabIndex = e.detail.current
			},
			//切换选项卡
			changeTab(e) {
				this.tabIndex = e
			},
			// 打开发布页
			openAddInput() {
				uni.navigateTo({
					url: '../add-input/add-input',
				});
			}
		}
	}
</script>

<style>

</style>